<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome to DKONE</title>
<link rel="stylesheet" href="./web/css/index.css" type="text/css" />
</head>
<body>
  <div>
    <form">
      <div>让我们了解彼此</div>
      <input id="playerName" type="text" placeholder="敢问少侠尊姓大名"/><br>
      <label><input type="radio" name="preempt" value="true" checked="true"> 抢先手 </label>
      <label><input type="radio" name="preempt" value="false" > 不抢 </label><br>
      <button id="loginButton">进入游戏</button>
    </form>
  </div>
<script>
  var ajax = new XMLHttpRequest();
  var loginButton = document.querySelector("#loginButton");
  var playerName = document.querySelector("#playerName");
  var preempts = document.getElementsByName("preempt");
  var player = {"playerName":playerName.value,"isPreemptive":true};
  /*
  */
  ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 && ajax.status == 200){
      //document.write(this.responseText);
      window.location.href=origin+this.responseText;
    }
  }
  loginButton.addEventListener("click",e=>{
    if(playerName.value){
      //完善用户信息
      player.playerName = playerName.value;
      for(i=0;i<preempts.length;i++){
        if(preempts[i].checked){
          player.isPreemptive = preempts[i].value;
        }
      }
      //在localStorage中存储用户信息
      localStorage.setItem('playerName',player.playerName);
      localStorage.setItem('isPreemptive',player.isPreemptive);
      //发送ajax请求
      let urlPlayer = new URLSearchParams(player).toString();
      ajax.open("GET",origin+"/login?"+urlPlayer,false);
      ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      ajax.send();
    }else{
      alert("请输入玩家名字");
    }
  });
</script>
</body>
</html>
